import React, { Component } from 'react'
import "./App.less"
import { withRouter } from "react-router-dom"
import YTKAlert from "@/components/YTKAlert/YTKAlert"
import Tabbar from "@/components/Tabbar/Tabbar"
import { connect } from 'react-redux'
import { alertDispatchFn, showYTKAlert } from "@/utils"
class App extends Component {
    render() {
        return (
            <div>
                <YTKAlert></YTKAlert>
                {this.props.children}
                <Tabbar></Tabbar>
            </div>
        )
    }
    hdClick() {
        showYTKAlert(this.props, "info", "抽离后的内容");
    }
    componentDidMount() {
        if (this.props.location.pathname === "/") {
            // 跳转到 /home
            this.props.history.push("/home")
        }
    }
}
// 为什么要抽离？ 因为任意组件都可能要调用YTKAlert这个组件
// 一旦调用就得定义showAlertFn和hideAlertFn这两个方法
// 所以这两方法要抽离

// 为什么不把整个mapDispatchToProps都抽离出去？
// 如果有其他的组件，需要在这个组件里面使用，并且修改到redux中的数据，那就得在mapDispatchToProps这里定义方法，所以不能整个mapDispatchToProps抽离出去。
// 这是站在项目管理和维护的角度上去考虑
const mapDispatchToProps = dispatch => {
    return {
        ...alertDispatchFn(dispatch)


    }
}

export default connect(null, mapDispatchToProps)(withRouter(App))